<template>
<div id="mains">
    <div id="contents">
        <div class="p-header">
            <i class="fa fa-chevron-left back-home" @click="handleGoHome"></i>
            <!-- tabCar -->
            <ul class="tab-box">
                <router-link 
					:to="item.english"
					tag="li" class="tab-item" v-for="item in tabCarList"
					:key="item.english"
				>
                    {{item.tabId}}
                </router-link>
            </ul>
        </div>
        <div class="p-content animate">
            <!-- 使用vuex 缓存数据 -->
            <keep-alive>
                <router-view/>
            </keep-alive>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "photo",
    data() {
        return {
            // "推荐","美图","关注","视频","小说","直播","热门"
            tabCarList: [
                { tabId: "推荐", english: "recommend" },
                { tabId: "美图", english: "photoList" },
                { tabId: "热门", english: "popular" },
                { tabId: "关注", english: "follow" },
                { tabId: "视频", english: "videos" },
                { tabId: "小说", english: "novel" },
                { tabId: "直播", english: "liveBroadcast" },
            ]
        }
    },
    methods: {
        // 返回主页
        handleGoHome() {
            this.$router.push("/home")
        }
    },
}
</script>

<style scoped>
#contents {
    margin-bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.p-header {
    margin-left: 50px;
    width: calc(100% - 50px);
    box-shadow: 0 1px 3px #d1d1d1;
}
.p-header .back-home {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 49px;
    line-height: 49px;
    background-color: #fdf5e5;
    text-align: center;
    border-radius: 0 3px 3px 0;
    box-shadow: 1px 0 3px #aeadaf;
}
.p-header .back-home:hover {
    background-color: #bebea1;
}
.p-header .tab-box {
    overflow-x: scroll;
    overflow-y: hidden;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
    scroll-behavior:smooth;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; 
    width: 100%;
}
/* 隐藏滚动条 */
/* .p-header .tab-box::-webkit-scrollbar {
    display: none;
} */
.p-header .tab-item {
    flex-shrink: 0;
    display: inline-block;
    width: 90px;
    height: 48px;
    line-height: 48px;
    color: #5a5353;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.p-header .router-link-active{
    color: #fa4a4a;
    border-bottom: 2px solid #fa4a4a;
}
.p-content {
    overflow: auto;
    height: 100%;
    flex: 1;
    background-color: #fdf5e5;
}
</style>